<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch">
      <template #resetBefore>
        <Button type="primary mr2" @click="handleCreate" >添加损耗</Button>
      </template>
    </CommonDateSearch>
    <a-card :class="['common-card flex', typeList.length > 4 && 'list-more']" title="大宗气体费用及流量">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <component :is="item.componentName" class="chart" :loading="item.loading" :chartData="item.chartData"
          :title="item.itemName" :unit="item.unit" />
      </div>
    </a-card>
    <AccountModal @register="registerModal" @success="handleSuccess" type="氮气（N2）" />
  </PageWrapper>
</template>
<script setup lang="ts">
import Line from '@/components/Charts/Line/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { Button } from 'ant-design-vue'
import { PageWrapper } from '@/components/Page'
import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
import { getChartChildDivListData } from '@/api/common/chart'
import { getChartChildListData, getTotalCodeAndInfo, geTn2UnitPriceChartData } from '@/api/common/chart'
import { getDictListByCode } from '@/api/sys/dict'
import { CommonTypeList } from '@/api/common/model/chart'
import BarLine from './BarLine.vue'
import { useModal } from '@/components/Modal'
import AccountModal from '../../electricity/summarySheet/AccountModal.vue'
defineOptions({ name: 'GasRedirect' })

interface TypeList extends CommonTypeList {
  componentName: string
}

const searchRef = ref()
const searchInfo = reactive({})
const typeList = ref<TypeList[]>([])
const dictCode = 'gasification_department'

onMounted(async () => {
  await getTypeList()
  searchRef.value.handleSearch()
})
const handleSearch = (params) => {
  Object.assign(searchInfo, params)
  getChartData()
}
const getTypeList = async () => {
  const res = await getDictListByCode(dictCode)
  typeList.value = res.map((item) => {
    const componentName = item.itemName.includes('用量及费用') || item.itemName == 'N2流量' ? BarLine : Line

    return ({
      ...item,
      loading: true,
      componentName,
      unit: item.itemName.includes('单耗') ? '元/Nm3' : item.itemName.includes('用量') || item.itemName.includes('费用') || item.itemName.includes('流量') ? 'Nm3' : '',
      chartData: {
        xaxisList: [],
        yaxisList: [],
      },
    })
  })
}
const getChartData = () => {
  typeList.value.forEach((item) => {

    item.loading = true

    if (item.itemName == '压缩空气单耗') {
      getChartChildDivListData({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
        decimalPlaces: 4
      }).then((res) => {
        item.chartData = res
        item.loading = false
      })
    }
    else if (item.itemName == '大宗气体用量及费用') {
      const fn = getTotalCodeAndInfo
      fn({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
      })
        .then((res) => {
          const arr = res.chartYAxisVo
          item.chartData = {
            ...res, // 保留原始响应数据
            yaxisList: res.codeyAxisList, // 将codeyAxisList赋值给yaxisList
            codeyAxisList: [arr]
            // 注意：chartYAxisVo和codeyAxisList保持原始数据结构不变
          };
          console.log(item.chartData, "item.chartData item.chartData ");
        })
        .finally(() => {
          item.loading = false
        })
    }
    else if (item.itemName == 'N2流量') {
      const fn = geTn2UnitPriceChartData
      fn({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
      })
        .then((res) => {
          item.chartData = {
            ...res, // 保留原始响应数据
            yaxisList: [res.chartYAxisVo], // 将codeyAxisList赋值给yaxisList
            // codeyAxisList: [res.chartYAxisVo] // 将chartYAxisVo转换为数组后赋值给codeyAxisList
          };


        })
        .finally(() => {
          item.loading = false;
        })
    } else {

      const fn = getChartChildListData
      fn({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
      })
        .then((res) => {

          item.chartData = res

        })
        .finally(() => {
          item.loading = false
        })
    }

  })
}
const [registerModal, { openModal }] = useModal()
function handleCreate() {
  openModal(true, {
    isUpdate: false,
  })
}
function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    console.log(isUpdate, values);

    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    // updateTableDataRecord(values.id, values)
  } else {
    getChartData()
  }
}
</script>
<style scoped lang="scss">
.common-card {
  flex: 1;
  overflow: hidden;

  &.list-more {
    :deep(.ant-card-body) {
      overflow: auto !important;
    }

    .chart-box {
      height: 45% !important;
    }
  }

  :deep(.ant-card-body) {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    padding: 4px;
    overflow: hidden;

    .chart-box {
      flex-shrink: 0;
      width: 50%;
      height: 50%;
      min-height: 240px;
      padding: 4px;
    }
  }
}
</style>